import { Component , OnInit } from '@angular/core';
import { RouterModule , Router}   from '@angular/router';

import { Hero } from './hero';
import { HeroService } from './hero.service';


@Component({
    selector: 'cuizi-heroes',
    templateUrl: './view/heroes.component.html',

    styleUrls: ['./app.component.css'],
    providers: []
})


export class HeroesComponent implements OnInit {
    heroes : Hero[];
    selectedHero: Hero;
    title = 'Tour of heroes';
    aaa = 'bbb';

    bbb() :String {
            if(undefined != this.selectedHero){
                    return this.selectedHero.name + ' cuizi';
            }
    }
    constructor(
        private router: Router , 
        private heroService: HeroService) { 
    };
    ngOnInit(): void {
            this.getHeroes();
    };


    hero : Hero = {
            name : 'windstrom',
            id : 1
    };
    
    gotoDetail(): void {
        this.router.navigate(['/detail', this.selectedHero.id]);
    }
    

    getHeroes(): void {
        this.heroService.getHeroes().then(heroes => this.heroes = heroes);
    };

    
    onSelect(hero: Hero): void {
        this.selectedHero = hero;
    };
}
